<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04员工表格练习</title>
</head>
<body>
    <input type="text" id="name" placeholder="请输入员工姓名">
    <input type="text" id="salary" placeholder="请输入员工工资">
    <input type="text" id="job" placeholder="请输入员工岗位">
    <input type="button" value="点我添加员工" onclick="addEmp()">
<hr>
    <table border="1px">
        <caption>员工表</caption>
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>岗位</th>
        </tr>
    </table>

    <script>
        function addEmp() {
            // 获取值
            let name = document.getElementById('name').value;
            let salary = document.getElementById('salary').value;
            let job = document.getElementById('job').value;
            console.log(name,salary,job)
            if (!name || !salary || !job){
                alert('请输入完整信息');
            }

            // 通过dom对象 创建tr td
            let tr = document.createElement('tr');

            let nameTd = document.createElement('td');
            let salaryTd = document.createElement('td');
            let jobTd = document.createElement('td');

            // 赋值
            nameTd.innerHTML = name;
            salaryTd.innerHTML = salary;
            jobTd.innerHTML = job;

            // 将td 添加到tr中
            tr.append(nameTd,salaryTd,jobTd);
            // 将tr 放入存在的表中
            document.querySelector('table').append(tr);
        }
    </script>
</body>
</html>